<template>
	<view class="m-home-page cover-screen-position flex-column-start-center">
		<!-- 		<view class="home-transition-bg" :style="{height:topBgHeight+'rpx'}">

		</view> -->
		<view class="home-tabbar-content flex-column-start-center" :style="{'background-image':`url(${bgUrl})`}"
			v-if="!actTabbar.isFullCon">
			<view class="home-top-nav flex-column-end-center" :style="{height:navHeight+'rpx'}">
				<!-- flex-row-center-center -->


				<!-- #ifdef MP-TOUTIAO -->
				<view class="home-nav-text-box flex-row-center-center" v-if="actTabbar.type!=='home'"
					:style="{height:navTextboxHeight+'rpx'}">
					<text v-if="actTabbar.type=='shop'">心动</text>
					{{actTabbar.name}}
				</view>
				<!--  #endif -->

				<!-- #ifndef MP-TOUTIAO -->
				<view class="home-nav-text-box flex-row-start-center" v-if="actTabbar.type!=='home'"
					:style="{height:navTextboxHeight+'rpx'}">
					<text v-if="actTabbar.type=='shop'">心动</text>
					{{actTabbar.name}}
				</view>
				<!--  #endif -->

			</view>
			<view class="home-center-content">
				<view class="home-box" v-if="actTabbar.type=='home'">
					<scroll-view ref="homeScorllView" scroll-y class="scroll-content" :show-scrollbar="false"
						:scroll-with-animation="true">
						<view class="home-banner" @click="handleHomeBannerClick">
							<!-- <u-swiper :list="swiperList" borderRadius="30" height="220rpx"></u-swiper> -->
							<view class="banner-content flex-row-center-center">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/916fd796565f4d46b1112d923f56a9fc.png"
									mode="aspectFill"></image>
							</view>
							<button open-type="share" class="share-button"></button>
						</view>
						<view class="home-function flex-row-center-center">
							<view class="home-function-item" v-for="(item,index) in twoQuickFunctions" :key="index"
								@click="handleTwoFunctionItemClick(item,index)">
								<image class="cover-img" :src="item.image" mode="aspectFill"></image>
							</view>

						</view>

						<view class="home-tips">舞姬推荐</view>
						<view class="home-list-box flex-column-start-center">
							<view class="home-list-content flex-row-start-start">
								<view class="home-list-item" v-for="(item,index) in girlRecommendList" :key="index"
									@click="handleToGirlRoom(item,index)">
									<image class="cover-img" :src="item.coverUrl" mode="aspectFill"></image>
									<view class="home-item-bottom-info flex-column-end-center">
										<view class="home-girl-name flex-row-center-center">{{item.cardName}}</view>
										<view class="home-girl-label flex-row-center-center">
											<view class="girl-label-item" v-for="(citem,cindex) in item.intro"
												:key="cindex">{{citem}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>


				</view>
				<view class="message-box flex-column-start-center" v-if="actTabbar.type=='message'">
					<view class="message-top-message flex-row-center-center">
						<view class="message-top-item message-system flex-row-center-center">
							<view class="message-top-text flex-column-center-center">
								<view class="message-top-title">系统通知</view>
								<view class="message-top-title-tip">无</view>
							</view>
							<view class="message-top-icon flex-row-center-center">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e0164c6d03bd45ddbcea2a372ab2a975.png"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="message-top-item message-email flex-row-center-center">
							<view class="message-top-text flex-column-center-center">
								<view class="message-top-title">系统邮件</view>
								<view class="message-top-title-tip">无</view>
							</view>
							<view class="message-top-icon flex-row-center-center">
								<image class="cover-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/30d3eaa1d57a4bd5889cf4daf87ff900.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="message-tip">
						好友会话
					</view>
					<view class="message-list-box">
						<scroll-view ref="chatListScorllView" scroll-y class="scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="message-list">
								<view class="message-list-item flex-row-center-center" v-for="(item,index) in chatList"
									:key="index">
									<view class="message-avatar flex-row-center-center"
										@click="handleMessageListItemClick(item,index,'avatar')">
										<image class="cover-img" :src="item.face" mode="aspectFill"></image>
									</view>
									<view class="message-text flex-column-center-center"
										@click="handleMessageListItemClick(item,index,'text')">
										<view class="message-name-time flex-row-between-center">
											<view class="message-name">{{item.name}}</view>
											<view class="message-createTime">{{beautifyTime(item.lastTalkTime,true)}}
											</view>
										</view>
										<view class="message-text-content">{{item.lastTalkMessage}}</view>

									</view>

								</view>
							</view>

						</scroll-view>
					</view>

				</view>

				<view class="dance-box " v-if="actTabbar.type=='dance'">

					<view class="go-luck-draw flex-row-start-center" @click="handleGoLuckDraw"
						:class="{'act-go':isGoClick}">
						<view class="go-luck-draw-icon">
							<image class="cover-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0a28736ae9b14b7b9232b5b1e4fd6aa3.png"
								mode="aspectFill"></image>
						</view>
						<view class="go-luck-draw-text flex-row-start-center">心动抽卡</view>
					</view>

					<view class="mini-type-tabs">
						<scroll-view ref="propTypeTabsScrollView" :scroll-x="true" style="white-space: nowrap"
							class="scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
							<view class="mini-type-list flex-row-start-center">
								<view class="mini-type-item flex-column-center-center"
									:class="{'act-mini-type-item':item.type==actGirlsType.type}"
									v-for="(item,index) in girlsTypeTabs" :key="index"
									@click="handleGirlsTypeItemClick(item,index)">
									<view class="mini-type-item-name">
										{{item.name}}
									</view>
								</view>

							</view>
						</scroll-view>
					</view>
					<scroll-view ref="danceGirlsScorllView" scroll-y class="scroll-content not-scoll-full-content"
						:show-scrollbar="false" :scroll-with-animation="true">
						<view class="dance-girls-list flex-column-start-center">
							<view class="dance-girls-content flex-row-start-start">
								<view class="dance-girls-item card-after-before card-farther"
									v-for="(item, index) in cardList" :key="index" :class="{
				  'blue-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'purple-card':item.RarityLevel==3,'colorful-card':item.RarityLevel==4
                }" @click="handleCardItemClick(item,index)">
									<view class="dance-girls-item-content  flex-row-center-center">
										<image class="cover-img" :src="item.image" mode="aspectFill"></image>
										<view class="start-box flex-row-center-center">
											<view class="start-item"
												v-for="(sitem, sindex) in getStartList(item.start, 5)" :key="sindex">
												<image class="start-img" v-if="sitem.active"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
													mode="aspectFill"></image>
												<image class="start-img" v-else
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
													mode="aspectFill"></image>
											</view>
										</view>

										<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
											<image class="cover-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)"
												mode="aspectFill">
											</image>
										</view>
										<view class="bottom-info-new flex-row-center-center">
											<view class="name-box flex-row-center-center">{{ item.name }}</view>
										</view>
										<view class="locked-masker flex-row-center-center" v-if="item.locked">
											<view class="locked-tip">未获得</view>
										</view>
									</view>
								</view>

							</view>
						</view>
					</scroll-view>
				</view>
				<view class="shop-box flex-column-start-center" v-if="actTabbar.type=='shop'">
					<view class="shop-top-tab flex-row-between-center">
						<view class="shop-tab-item flex-row-center-center"
							:class="{'act-shop-tab-item':actShopTab.type==item.type}" v-for="(item,index) in shopTabs"
							:key="index" @click="handleShopTabItemClick(item,index)">
							<view class="shop-tab-icon">
								<view class="shop-tab-icon-content"
									:class="{'hide-content':actShopTab.type==item.type}">
									<image class="cover-img" :src="item.icon" mode="aspectFill"></image>
								</view>
								<view class="shop-tab-icon-content"
									:class="{'hide-content':actShopTab.type!=item.type}">
									<image class="cover-img" :src="item.actIcon" mode="aspectFill"></image>
								</view>
							</view>
							<view class="shop-tab-name">{{item.name}}</view>
						</view>
					</view>
					<view class="shop-content flex-column-start-center">
						<view class="mini-type-tabs" v-if="actShopTab.type=='shop-prop'">
							<scroll-view ref="propTypeTabsScrollView" :scroll-x="true" style="white-space: nowrap"
								class="scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
								<view class="mini-type-list flex-row-start-center">
									<view class="mini-type-item flex-column-center-center"
										:class="{'act-mini-type-item':item.type==actPropType.type}"
										v-for="(item,index) in propTypeList" :key="index"
										@click="handlePropTypeItemClick(item,index)">
										<view class="mini-type-item-name">
											{{item.name}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<scroll-view ref="shopScrollView" scroll-y class="scroll-content not-scoll-full-content"
							:show-scrollbar="false" :scroll-with-animation="true">
							<view class="shop-props flex-column-start-center"
								v-if="actShopTab.type=='shop-prop'||actShopTab.type=='shop-recharge'||actShopTab.type=='shop-gift-pack'">
								<view class="shop-props-inner flex-row-start-start">
									<view class="shop-props-item flex-column-end-center"
										v-for="(item,index) in useShopDataList" :key="index"
										:style="{height:!item.intro?'278rpx':'330rpx'}">
										<view class="shop-goods-icon good-after-before" :class="{  'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4,'gray-good':!item.RarityLevel}">
											<image class="cover-img" :src="item.photoUrl" mode="aspectFill"></image>
											<!-- <view class="shop-goods-count">x{{item.count}}</view> -->
										</view>
										<view class="shop-goods-name flex-row-center-center">{{item.cardName}}</view>
										<view class="shop-goods-intro flex-row-center-center" v-if="item.intro">
											{{item.intro}}
										</view>
										<view class="shop-goods-btn flex-row-center-center"
											@click="handleBuyGoods(item,index)">
											<image class="shop-goods-btn-icon" v-if="item.cardPoint>0"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
												mode="aspectFill"></image>
											<text v-if="item.cardPoint>0">{{item.cardPoint}}</text>
											<text v-if="item.cardPoint<=0">￥{{item.cardPrice}}</text>
										</view>
									</view>
								</view>
							</view>


							<view class="shop-privilege-box flex-column-start-center"
								v-if="actShopTab.type=='shop-privilege'">
								<view class="shop-privilege-card">
									<view class="privilege-card-content">
										<image class="cover-img" :src="actPrivilege.cardBg" mode="aspectFill"></image>
										<view class="shop-privilege-user-info flex-row-start-center">
											<view class="user-avatar">
												<image class="cover-img" v-if="myInfo" :src="myInfo.photoUrl"
													mode="aspectFill"></image>
											</view>
											<view class="privilege-user-time" :style="{'color':actPrivilegeColor}">
												2026-01-01</view>
										</view>
									</view>


								</view>
								<view class="shop-privilege-type-content">
									<view class="shop-privilege-tabs flex-row-center-center">
										<view class="privilege-tab-item  flex-row-center-center"
											:style="{'color':actPrivilegeIndex==index?actPrivilegeColor:'#8d8d8b'}"
											v-for="(item,index) in privilegeTabList" :key="index"
											@click="handlePrivilegeTabClick(item,index)">
											{{item.name}}
										</view>
										<view class="privilege-tab-line"
											:style="{left:((100/(privilegeTabList.length*2))*(actPrivilegeIndex*2+1))+'%','backgroundColor':actPrivilegeColor}">
										</view>
									</view>
									<view class="shop-privilege-list flex-row-start-start">
										<view class="privilege-card-item" v-for="(item,index) in actPrivilege.cardList"
											:key="index" :style="{'border-color':actPrivilegeColor}">
											<view class="privilege-card-name" :style="{'color':actPrivilegeColor}">
												{{item.cardName}}
											</view>
											<view class="privilege-card-oldPrice">￥{{item.cardPrice}}</view>
											<view class="privilege-card-price" :style="{'color':actPrivilegeColor}">
												￥{{item.cardRealPrice}}</view>

											<view class="privilege-buy-btn shop-goods-btn flex-row-center-center"
												@click="handleVipBuy(item)">
												立即购买
											</view>
										</view>
									</view>

								</view>

								<view class="shop-privilege-intro flex-column-end-center">
									<view class="privilege-intro-title flex-row-center-center">{{actPrivilege.name}}权益
									</view>
									<view class="privilege-intro-list">
										<scroll-view ref="privilegeIntroScroll" scroll-y class="scroll-content"
											:show-scrollbar="false" :scroll-with-animation="true">
											<view class="privilege-intro-inner">
												<view class="privilege-intro-item flex-row-start-center"
													v-for="(item,index) in actPrivilege.privilegeList" :key="index"
													:style="{'background-color':privilegeBgColor}">
													<view class="privilege-intro-icon">
														<image class="cover-img" :src="item.coverUrl" mode="aspectFill">
														</image>
													</view>
													<view class="privilege-intro-content flex-column-center-start">
														<view class="privilege-intro-content-title">{{item.taskName}}
														</view>
														<view class="privilege-intro-text">{{item.intro}}</view>

													</view>
												</view>
											</view>

										</scroll-view>

									</view>


								</view>

							</view>


						</scroll-view>





					</view>
				</view>
				<view class="mine-box" v-if="actTabbar.type=='mine'">
					<scroll-view ref="mineScrollView" scroll-y class="scroll-content" :show-scrollbar="false"
						:scroll-with-animation="true">
						<view class="mine-box-content flex-column-start-center" v-if="myInfo">
							<view class="mine-info-box flex-row-start-center">
								<view class="mine-avatar">
									<image class="cover-img" :src="myInfo.photoUrl" mode="aspectFill"></image>
								</view>
								<view class="mine-info flex-column-center-center">
									<view class="mine-nick-name">{{myInfo.nickName}}</view>
									<view class="mine-base-info flex-row-start-center">
										<view class="mine-id flex-row-start-center">
											<view class="mine-id-icon flex-row-center-center">ID</view>
											<view class="mine-id-text">{{myInfo.memberId}}</view>
										</view>
										<view class="mine-level flex-row-start-center">
											<text class="mine-level-icon">Lv.</text>
											{{myInfo.level}}
										</view>
										<view class="mine-level-split-icon"></view>
										<view class="mine-level-name">{{myInfo.honor}}</view>
									</view>
									<view class="mine-level-progress flex-row-start-center">
										<view class="level-progress-content flex-row-start-center">
											<view class="level-progress-inner" :style="{width:playerLevelPercent+'%'}">
											</view>
										</view>
										<view class="level-progress-percent" v-if="playerLevelInfo">
											({{playerLevelInfo.value}}/{{playerLevelInfo.levelValue}})</view>
									</view>
								</view>
							</view>
							<view class="mine-four-function flex-row-start-start">
								<view class="four-function-item" v-for="(item,index) in mineFourFuctions" :key="index"
									@click="handleFourFunctionsItemClick(item,index)">
									<image class="cover-img" :src="item.image" mode="aspectFill"></image>
									<view class="my-pack-thing flex-row-start-center" v-if="item.type=='my-pack'">
										<view class="my-pack-thing-item flex-row-start-center">
											<image class="my-pack-thing-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
												mode="aspectFill"></image>
											<view class="my-pack-thing-count">300</view>
										</view>
										<view class="my-pack-thing-item flex-row-start-center">
											<image class="my-pack-thing-icon"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e45b989336b54631997a967aa05a36d4.png"
												mode="aspectFill"></image>
											<view class="my-pack-thing-count">100</view>
										</view>

									</view>
								</view>
							</view>
							<view class="mine-other-controls">
								<view class="other-big-item" v-for="(bItem,bIndex) in mineOtherFunctions" :key="bIndex">
									<view class="mine-other-item flex-row-start-center" v-for="(item,index) in bItem"
										:key="index" @click="handleMineOtherFunctionsItemClick(item,index)">
										<button open-type="share" class="share-button"
											v-if="item.type=='my-share'"></button>
										<view class="mine-other-item-icon">
											<image class="cover-img" :src="item.image" mode="aspectFill"></image>
										</view>
										<view class="mine-other-text flex-row-start-center">{{item.name}}</view>
										<view class="mine-other-next flex-row-center-center">
											<image class="cover-img"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/10813f487b454891a4852aca9451883d.png"
												mode="aspectFill"></image>
										</view>
									</view>
								</view>

							</view>
						</view>
					</scroll-view>
				</view>



			</view>
			<view class="home-bottom-tabbar flex-row-center-center">
				<view class="home-tabbar-item flex-column-center-center"
					:class="{'act-tabbar':item.type==actTabbar.type}" v-for="(item,index) in tabbarList" :key="index"
					@click="handleTabbarItemClick(item,index)">
					<view class="tabbar-icon">
						<view class="tabbar-icon-content" :class="{'hide-content':item.type==actTabbar.type}">
							<image class="cover-img" :src="item.icon" mode="aspectFill">
							</image>
						</view>
						<view class="tabbar-icon-content" :class="{'hide-content':item.type!=actTabbar.type}">
							<image class="cover-img" :src="item.actIcon" mode="aspectFill"></image>
						</view>

					</view>
					<view class="tabbar-name flex-row-center-center">{{item.name}}</view>
				</view>
			</view>

		</view>


		<view class="full-components-content" v-if="actTabbar.isFullCon">
			<view class="back-box" v-if="!isHideBack">

				<!-- #ifdef MP-TOUTIAO -->
				<view class="toutiao-back-btn flex-row-center-center" :class="{'act-go':isGoClick}"
					@click="handleBackClick">
					返 回
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-TOUTIAO -->
				<mBack ref="fullScreenBack" @getGameResult="handleBackClick" :backTop="backTop" :name="backName">
				</mBack>
				<!-- #endif -->
			</view>
			<view class="full-box">
				<mAgentChat ref="mAgentChat" v-if="actTabbar.type=='chatPage'" :agentId="actAgentId"></mAgentChat>
				<girlMainPage ref="girlMainPage" v-if="actTabbar.type=='mianPage'" :storyId="storyId"
					@hideBackBtn="handleHideBack" @showBackBtn="handleShowBack"></girlMainPage>
				<mLuckDraw ref="mLuckDraw" @hideBackBtn="handleHideBack" @showBackBtn="handleShowBack" bgType="image"
					v-if="actTabbar.type=='luck-draw'" :propertyHeight="rpxMenuButtonHeight"
					:propertyTop="rpxMenuButtonTop"></mLuckDraw>

				<!-- #ifdef MP-TOUTIAO -->
				<!-- 			<view class="toutiao-back-btn flex-row-center-center" :class="{'act-go':isGoClick}"
					@click="handleBackClick">
					返 回
				</view> -->
				<!-- #endif -->



				<view class="second-page-box flex-column-start-center" :style="{'background-image':`url(${bgUrl})`}"
					v-if="actTabbar.type=='rewardCenter'||actTabbar.type=='my-bag'">
					<view class="home-top-nav flex-column-end-center" :style="{height:navHeight+'rpx'}">
						<!-- flex-row-center-center -->
						<view class="home-nav-text-box flex-row-center-center" :style="{height:navTextboxHeight+'rpx'}">
							{{actTabbar.name}}
						</view>
					</view>
					<view class="mini-type-tabs" v-if="actTabbar.type=='my-bag'">
						<scroll-view ref="propTypeTabsScrollView" :scroll-x="true" style="white-space: nowrap"
							class="scroll-content" :show-scrollbar="false" :scroll-with-animation="true">
							<view class="mini-type-list flex-row-start-center">
								<view class="mini-type-item flex-column-center-center"
									:class="{'act-mini-type-item':item.type==actGirlsType.type}"
									v-for="(item,index) in girlsTypeTabs" :key="index"
									@click="handleGirlsTypeItemClick(item,index)">
									<view class="mini-type-item-name">
										{{item.name}}
									</view>
								</view>

							</view>
						</scroll-view>
					</view>
					<view class="second-page-content">
						<scroll-view ref="secondPageScorllView" scroll-y class="scroll-content" :show-scrollbar="false"
							:scroll-with-animation="true">
							<view class="reward-center-box flex-column-start-center"
								v-if="actTabbar.type=='rewardCenter'">
								<view class="reward-today flex-column-center-center">
									<view class="reward-today-content flex-row-start-center">
										<view class="reward-content-icon">
											<image class="cover-img"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e45b989336b54631997a967aa05a36d4.png"
												mode="aspectFill"></image>
										</view>
										<view class="reward-content-text">我的金币</view>
										<view class="reward-content-num">{{todayPoint}}</view>
									</view>
									<view class="reward-today-tips">参与活动获得的赚币会实时存入你的账户余额中</view>
								</view>
								<view class="reward-sign-in">
									<view class="reward-tips flex-row-between-center">
										<view class="reward-tips-title">连续7天签到累计得到 {{daysPointTotal}} 币</view>
										<!-- <view class="reward-log-tip">本周已签到 {{signCount}} 天</view> -->
									</view>
									<view class="reward-sing-in-list flex-row-start-center">
										<view class="reward-sing-in-item flex-column-start-center"
											v-for="(item,index) in task7DaysList" :key="index"
											:class="{'reward-singed-in-item':item.taskStatus}">
											<view class="sing-in-reward flex-column-center-center">
												<text>+{{item.rewardsNum}}</text>
												<image class="sing-in-reward-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e45b989336b54631997a967aa05a36d4.png"
													mode="aspectFill"></image>

											</view>
											<view class="sing-in-text flex-row-center-center">
												<text v-if="!item.taskStatus">{{item.taskName}}</text>
												<text v-else>已签</text>
											</view>
										</view>
									</view>
									<view class="reward-sing-in-button flex-row-center-center"
										:class="{'btnIsClick':btnClickIndex==-2}" @click="handleTodaySingIn">
										<text v-if="!signStatus">立即签到</text>
										<text v-else>明日再来</text>
										<view class="sing-in-button-masker" v-if="signStatus">
										</view>
									</view>
								</view>
								<view class="reward-day-task flex-column-start-center"
									v-for="(bitem,bindex) in baseTaskList" :key="bindex">
									<view class="reward-day-task-content flex-column-start-center"
										v-if="bitem.list.length">
										<view class="reward-tips"
											:class="{'flex-row-between-center':bitem.type!='daily','flex-row-start-center':bitem.type=='daily'}">
											<view class="reward-tips-title">{{bitem.name}}</view>
											<view class="to-get-vip flex-row-start-center"
												v-if="bitem.type!='daily'&&((bitem.type=='vip'&&!vipStatus)||(bitem.type=='svip'&&!svipStatus))"
												@click="handleToGetVipClick(bitem.type)">
												<text>去开通</text>
												<image class="to-get-vip-icon"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/748d8c577cc245669dfa40434b231242.png"
													mode="aspectFill"></image>

											</view>
										</view>
										<view class="day-task-list flex-column-start-center">
											<view class="day-task-item flex-row-start-center"
												v-for="(item,index) in bitem.list" :key="index">
												<view class="task-icon">
													<image class="cover-img" :src="item.rewardsPhotoUrl"
														mode="aspectFill">
													</image>
												</view>
												<view class="task-content flex-column-center-center">
													<view class="task-top flex-row-start-center">
														<view class="task-title">{{item.taskName}}</view>
														<view class="task-reward flex-row-start-center">
															<text class="task-reward-num">+{{item.rewardsNum}}</text>
															<image class="task-reward-icon"
																src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e45b989336b54631997a967aa05a36d4.png"
																mode="aspectFill"></image>
														</view>
													</view>
													<view class="task-task-intro">{{item.intro}}</view>
												</view>
												<view class="task-button flex-row-center-center">
													<view class="task-button-content flex-row-center-center"
														:class="{'task-button-get-reward':item.taskStatus==1,'cancleBtn':item.taskStatus==2,'btnIsClick':btnClickIndex==index+bitem.type}"
														@click="handleGetTaskRewards(item,index,bitem.type)"
														v-if="bitem.type=='daily'||(bitem.type=='vip'&&vipStatus==1)||(bitem.type=='svip'&&svipStatus==1)">
														<text v-if="item.taskStatus==0">进行中</text>
														<text v-if="item.taskStatus==1">待领取</text>
														<text v-if="item.taskStatus==2">已领取</text>
													</view>

												</view>

											</view>
										</view>

									</view>


								</view>
								<view class="more-task-tip flex-row-center-center">更多任务即将推出，敬请期待</view>
							</view>

							<view class="my-bag-box flex-column-start-center" v-if="actTabbar.type=='my-bag'">
								<view class="shop-props flex-column-start-center">
									<view class="shop-props-inner flex-row-start-start">
										<!-- :style="{height:!item.intro?'278rpx':'330rpx'}" -->
										<view class="shop-props-item flex-column-end-center"
											v-for="(item,index) in useShopDataList" :key="index"
											:style="{height:'260rpx'}">
											<view class="shop-goods-icon good-after-before" :class="{'green-good': item.RarityLevel == 1,
								'orange-good': item.RarityLevel == 2,
								'blue-good': item.RarityLevel == 3,
								'purple-good': item.RarityLevel == 4,'gray-good':!item.RarityLevel}">
												<image class="cover-img" :src="item.photoUrl" mode="aspectFill"></image>
												<view class="shop-goods-count">x{{item.total}}</view>
											</view>
											<view class="shop-goods-name flex-row-center-center">{{item.cardName}}
											</view>
											<view class="shop-goods-intro flex-row-center-center" v-if="item.intro">
												{{item.intro}}
											</view>
											<!-- 										<view class="shop-goods-btn flex-row-center-center"
												@click="handleBuyGoods(item,index)">
												<image class="shop-goods-btn-icon" v-if="item.cardPoint>0"
													src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
													mode="aspectFill"></image>
												<text v-if="item.cardPoint>0">{{item.cardPoint}}</text>
												<text v-if="item.cardPoint<=0">￥{{item.cardPrice}}</text>
											</view> -->
										</view>
									</view>
								</view>


							</view>

						</scroll-view>
					</view>

				</view>



				<view class="empty-box" v-if="actTabbar.type=='emptyPage'"
					:style="{'background-image':`url(${emptyBgUrl})`}"></view>
			</view>
			<view class="getReward-modal" :style="{'z-index':!isGetRewards?-1:9999999}">
				<getRewardsModal ref="getRewardsModal" @close="handleRwardModalClose"></getRewardsModal>
			</view>
		</view>

		<view class="recharge-box">
			<mRecharge ref="mRecharge" :gameId="gameId"></mRecharge>
		</view>
		<view class="buy-modal flex-column-center-center" v-if="showBuyModal" @click="handleBuyGoodsClick('cancel')">
			<view class="buy-good-content flex-column-start-center" v-if="actBuyData" @click.stop>
				<view class="buy-total-consume flex-row-between-center">
					<view class="total-consume-box flex-row-start-center">
						总计：<image class="total-consume-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/68d883647c464cdeb8aa72413fee83f7.png"
							mode="aspectFill"></image>{{buyGoodsTotalConsume}}
					</view>

				</view>
				<view class="good-info">
					<view class="good-info-default flex-column-start-center" v-if="actBuyData.type=='prop'">
						<view class="good-info-default-name flex-row-center-center">{{actBuyData.cardName}}</view>
						<view class="good-info-default-intro flex-row-center-center">{{actBuyData.intro}}</view>
						<view class="good-info-photo good-after-before" :class="{  'green-good': actBuyData.RarityLevel == 1,
                      'orange-good': actBuyData.RarityLevel == 2,
                      'blue-good': actBuyData.RarityLevel == 3,
                      'purple-good': actBuyData.RarityLevel == 4,'gray-good':!actBuyData.RarityLevel}">
							<image class="cover-img" :src="actBuyData.photoUrl" mode="aspectFill"></image>
							<view class="good-buy-num">x1</view>
						</view>
					</view>

					<view class="good-info-giftBox flex-row-start-start" v-if="actBuyData.type=='giftBox'">
						<view class="good-info-photo good-after-before" :class="{  'green-good': actBuyData.RarityLevel == 1,
						'orange-good': actBuyData.RarityLevel == 2,
						'blue-good': actBuyData.RarityLevel == 3,
						'purple-good': actBuyData.RarityLevel == 4,'gray-good':!actBuyData.RarityLevel}">
							<image class="cover-img" :src="actBuyData.photoUrl" mode="aspectFill"></image>
							<view class="good-buy-num">x1</view>
						</view>

						<view class="good-info-giftBox-intro">
							<view class="good-info-giftBox-name">{{actBuyData.cardName}}</view>
							<view class="good-info-giftBox-intro-content flex-row-start-center">{{actBuyData.intro}}
							</view>
						</view>

					</view>
				</view>
				<view class="good-split-line flex-row-center-center">
					<view class="good-line-point"></view>
					<view class="good-line"></view>
					<view class="good-line-point"></view>
				</view>

				<view class="good-info-gift-inner flex-column-start-center" v-if="actBuyData.type=='giftBox'">
					<view class="good-info-gift-inner-text flex-row-center-center">礼包内容</view>
					<view class="good-info-gift-inner-list flex-row-center-center">
						<view class="inner-list-item good-after-before" v-for="(item,index) in testGiftBoxList"
							:key="index" :class="{  'green-good': item.RarityLevel == 1,
                      'orange-good': item.RarityLevel == 2,
                      'blue-good': item.RarityLevel == 3,
                      'purple-good': item.RarityLevel == 4,'gray-good':!item.RarityLevel}">
							<image class="cover-img" :src="item.photoUrl" mode="aspectFill"></image>
							<view class="inner-list-item-num">x1</view>
						</view>
					</view>
				</view>
				<view class="good-control-inner flex-row-center-center" v-if="actBuyData.type=='prop'">
					<view class="control-button flex-column-center-center" :class="{'btnIsClick':btnClickIndex=='sub'}"
						@click="handleBuyGoodsNumControl('sub')">
						<image class="control-button-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e40d77b419424b4f9454905876339876.png"
							mode="aspectFill"></image>
					</view>
					<view class="godd-buy-num flex-row-center-center">{{buyNum}}</view>
					<view class="control-button flex-column-center-center" :class="{'btnIsClick':btnClickIndex=='add'}"
						@click="handleBuyGoodsNumControl('add')">
						<image class="control-button-icon"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44d7f6c7db3f4fb094fc70b3eb53c26d.png"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="good-buy-btns flex-row-center-center">
					<view class="good-buy-cancel good-buy-btn flex-row-center-center"
						@click="handleBuyGoodsClick('cancel')" :class="{'btnIsClick':btnClickIndex=='cancel'}">取消
					</view>
					<view class="good-buy-confirm good-buy-btn flex-row-center-center"
						@click="handleBuyGoodsClick('confirm')" :class="{'btnIsClick':btnClickIndex=='confirm'}">确定
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import * as API_Trade from "@/api/trade";
	import {
		throttle
	} from "@/utils/tools.js"
	import {
		WXPaySdk
	} from "@/js_sdk/lili-pay/wx-pay.js";
	import {
		mapState,
		mapGetters,
		mapActions
	} from "vuex";
	import {
		beautifyTime
	} from "@/utils/filters.js";
	import {
		getFirstPageRecommendList,
		getMyCardList,
		quickParty,
		getChatList,
		getMyInfo,
		getTaskCenterList,
		sevenDaysSign,
		taskGetRewards,

		getVipList,
		getSvipList,
		getGiftBoxList,
		getPropsList,
		getPointList,
		buyGoods

	} from "@/api/game.js"

	import {
		getStartList,
		handleReturnRarityLevelUrl
	} from "@/utils/tools.js"
	import mAgentChat from "@/components/m-agent-chat/index.vue"
	import girlMainPage from "@/components/girl-mian-page/index.vue"
	import mLuckDraw from "@/components/m-luck-draw/index.vue"
	import mBack from "@/components/m-back/index.vue"
	import getRewardsModal from "@/components/m-daily/type-modal.vue"
	import mPop from "@/components/m-pop/index.vue"
	import mRecharge from "@/components/m-recharge/index.vue"



	export default {
		props: {
			storyId: {
				type: [Number, String],
				default: ""
			},
			gameId: {
				type: [Number, String], //之后直接传入即可
				default: ""
			},
		},
		components: {
			mAgentChat,
			mBack,
			girlMainPage,
			mLuckDraw,
			getRewardsModal,
			mPop,
			mRecharge
		},
		data() {
			return {
				totalPoint: 0, //当前钻石总数
				backName: "",
				isHideBack: false,
				showBuyModal: false,
				navHeight: 200,
				rpxMenuButtonHeight: 64,
				rpxMenuButtonTop: 100,
				navTextboxHeight: 80,
				topBgHeight: 220,
				backTop: 100,
				screenWidth: 375,
				bgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/86cf607104b44a67b4079640106464e1.png",
				preTabbar: null,
				btnClickIndex: -1,
				day: 0,
				emptyBgUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9602256680704321893c1f1b4ec5e80c.png",
				// 奖励中心相关
				isGetRewards: false,
				signStatus: 0,
				vipStatus: 0,
				svipStatus: 0,
				daysPointTotal: 100,
				todayPoint: 0,
				signCount: 0,
				task7DaysList: [],
				baseTaskList: [

				],
				// 首页
				twoQuickFunctions: [{
						name: "奖励中心",
						key: "reward-center",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4fbe0f5266ac49c48cc81e41e82eeeb8.png"
					},
					{
						name: "快速匹配",
						key: "quick-party",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/18414781454d4495a7d0ca4fa28e2412.png"
					},
				],
				girlRecommendList: [],
				swiperList: [{
						gamePhoto: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d070f1a47d17416db5503e31e0c3fd94.jpg",
						bannerType: 'image'
					},
					{
						gamePhoto: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c0de4f5b7ad4cf0bec994a70f30a7db.jpg",
						bannerType: 'image'
					},
					{
						gamePhoto: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dbb3b04cc5aa4fab8a09443736e041c5.jpg",
						bannerType: 'image'
					},
				],
				// 乐舞
				isGoClick: false,
				actGirlsIndex: 0,
				actGirlsType: {
					name: "全部",
					type: "all"
				},
				girlsTypeTabs: [{
						name: "全部",
						type: "all"
					},
					{
						name: "已获得",
						type: "obtained"
					},
					{
						name: "未获得",
						type: "loss"
					},
				],
				cardList: [

				],

				// 我的
				myInfo: null,
				playerLevelInfo: null,
				mineOtherFunctions: [
					[{
							name: "我的背包",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/fd9c1b68b7c7472b90439e28eebd9cfb.png",
							type: "my-bag"
						},
						{
							name: "我的秘书",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e346181fc1b24c04bd60a67828e9a883.png",
							type: "my-secretary"
						},
						{
							name: "我的合伙",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4266141207054f8e946a71733e1504f3.png",
							type: "recruit-partner"
						},
					],
					[{
							name: "VIP特权",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/4381b036ff7743a4985605a619be0cb4.png",
							type: "my-vip-comment"
						},
						{
							name: "充值有礼",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/872aa4d568814c09beedaeb54446e9eb.png",
							type: "my-recharge"
						},
					],
					[{
						name: "分享赚钱",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d05a728a68914869926b80a2d4209d75.png",
						type: "my-share"
					}, ],
					[

						{
							name: "系统设置",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/def075959c094632ba43705d6a43d24d.png",
							type: "my-set"
						},
						{
							name: "关于我们",
							image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5aa03beab2294f70b5af2f44aa3e36fe.png",
							type: "my-about-us"
						},
					],




				],
				mineFourFuctions: [{
						name: "我的钱包",
						type: "my-pack",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0710a0f0c2994f2da7b19cb2b3d65ec8.png",
					},
					{
						name: "总裁权益",
						type: "my-vip-ceo",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c2dac7f6a8264cf79820bdc0510081da.png",
					},
					{
						name: "奖励中心",
						type: "my-reward-center",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d18ef1205f9f40caa5d08a355ba49aa3.png",
					},

					{
						name: "我的乐舞",
						type: "my-dance",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a2e5fe36376b47c5808253bddc0b906c.png",
					}

				],

				// 消息
				actAgentId: "",
				chatList: [],
				// 商店
				// actBuyData: null,
				actBuyData: {
					cardName: "神秘礼包",
					intro: "道具",
					cardPoint: 88,
					photoUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ac24bc229b3d4fb18846dadf2d0b9076.png",
					type: "giftBox"
				},
				buyNum: 1,
				actPropType: {
					name: "礼物",
					type: "gift"
				},
				propTypeList: [{
						name: "礼物",
						type: "gift"
					},
					{
						name: "音弦",
						type: "intensity"
					},
					{
						name: "音符",
						type: "note"
					},
					{
						name: "判定",
						type: "judge"
					},

				],
				actPrivilegeIndex: 0,
				actPrivilege: null,
				privilegeTabList: [],
				testGiftBoxList: [],
				propsList: [],
				rechargeList: [],
				giftBoxList: [],
				actShopTab: {
					name: "权益",
					type: "shop-privilege",
					icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4562486236a401aadf7fa6c7c4e77e6.png",
					actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c31865f0526f4c229f792a5c27761a65.png"
					// name: "道具",
					// type: "shop-prop",
					// icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c29f5dd0349f49448c13329d795b9ace.png",
					// actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bf05908955934cad9cd5289f036d6e4f.png"
				},
				shopTabs: [{
						name: "权益",
						type: "shop-privilege",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4562486236a401aadf7fa6c7c4e77e6.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c31865f0526f4c229f792a5c27761a65.png"
					},
					{
						name: "礼包",
						type: "shop-gift-pack",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8486ba0cbedf45128faa02eb7f6f604e.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7c579914febf49ff9b967412d1d26a48.png"
					},
					{
						name: "充值",
						type: "shop-recharge",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/edd786a4ce654fe28bdfb4ceed09d336.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/3fc49b76c42c40dc8b157fc94c5b812f.png"
					},
					{
						name: "道具",
						type: "shop-prop",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c29f5dd0349f49448c13329d795b9ace.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/bf05908955934cad9cd5289f036d6e4f.png"
					},
				],
				// tabbar
				actTabbar: {
					type: 'home', // 其他类型  chatPage 聊天组件   mianPage 主页
					name: "首页",
					isFullCon: false
					// type: 'luck-draw',
					// name: "心动抽卡",
					// isFullCon: true

				},
				tabbarList: [{
						type: 'home',
						name: "首页",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ca7754be6aa42e38e8d26faa5110e03.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ed325729e0a04cbea902415c711e364d.png",
						isFullCon: false
					},
					{
						type: 'message',
						name: "消息",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/934fe777aa244eb79c287d3d38791956.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/04a7c3f59da7477fb505342649530067.png",
						isFullCon: false
					},
					{
						type: 'dance',
						name: "舞姬",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2f9b2d72437d419abfccde2cc2bce6d3.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/82e00259639d4418b74cb930bdc6dd1a.png",
						isFullCon: false
					},
					{
						type: 'shop',
						name: "商店",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/856869124e4f462a90e0a028ceef7480.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/443881fdc98b4653a5d2144d8b86708f.png",
						isFullCon: false
					},
					{
						type: 'mine',
						name: "我的",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/07b2fefc1459463aa18a0fa04ff15a69.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/83b3e1b6b8aa48a3828aecef0f39c0df.png",
						isFullCon: false
					},
				],
			}
		},

		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo

				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.rpxMenuButtonHeight = rpxHeight
				this.rpxMenuButtonTop = rpxTop


				this.navHeight = (rpxTop + rpxHeight)
				this.navTextboxHeight = rpxHeight
				this.topBgHeight = (rpxTop + rpxHeight) + 80
				this.backTop = rpxTop + ((rpxHeight - 50) / 2)

				this.handleGetFirstPageRecommendList() //测试时使用
				this.handleGetCardList()
				this.handleGetChartList()
				this.handleGetMyInfo()
				this.handleGetTaskCenterList()
				this.handleGetVipList()
				this.handleGetPropsList()
				this.handleGetGiftBoxList()
				this.handleGetPointList()

				this.day = new Date().getDay()

			} catch (e) {

			}
		},

		computed: {
			...mapState(["curStoryId"]),
			...mapGetters(["globalGameCtx"]),
			useShopDataList() {
				if (this.actShopTab.type == 'shop-recharge') {
					return this.rechargeList
				} else if (this.actShopTab.type == 'shop-gift-pack') {
					return this.giftBoxList
				} else {
					return this.propsList
				}
			},
			actPrivilegeColor() {
				if (this.actPrivilege && this.actPrivilege.type == 'vip-comment') {
					return "#c45b07"
				} else {
					return "#ea6352"
				}
			},
			privilegeBgColor() {
				if (this.actPrivilege && this.actPrivilege.type == 'vip-comment') {
					return "rgba(255, 233, 189, .15)"
				} else {
					return "rgba(254, 219, 223, .15)"
				}
			},
			playerLevelPercent() {
				if (this.playerLevelInfo) {
					let {
						levelValue,
						upgradeValue,
						value
					} = this.playerLevelInfo
					return (((upgradeValue + value) - levelValue) / upgradeValue) * 100
				} else {
					return 0
				}
			},
			buyGoodsTotalConsume() {
				if (!this.actBuyData) {
					return 0
				} else {
					return this.actBuyData.cardPoint * this.buyNum
				}
			},
		},

		watch: {
			// curStoryId: {
			// 	handler(newVal, oldVal) {
			// 		if (this.storyId == newVal) {
			// 			//
			// 			if(this.actTabbar.type=='home'){
			// 				this.handleGetFirstPageRecommendList()
			// 			}
			// 		}
			// 	},
			// 	deep: true,
			// 	immediate: true,
			// },
			actTabbar: {
				handler(newVal, oldVal) {
					if (oldVal) {
						this.preTabbar = oldVal
					}

					if (newVal.type == 'luck-draw') {
						this.backName = "心动抽卡"
					} else {
						this.backName = ""
					}
				},
				deep: true,
				immediate: true
			}
		},

		methods: {
			...mapActions(["getRoomCardDetail"]),
			beautifyTime,
			getStartList,
			handleReturnRarityLevelUrl,
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			handleTabbarItemClick(item, index) {
				this.actTabbar = item
			},
			// 充值
			createTradeFun(item, callBack) {
				// 防抖
				throttle(() => {
					//  创建订单
					let client;
					// #ifdef H5
					client = "H5";
					// #endif
					// #ifdef MP-WEIXIN 
					client = "WECHAT_MP";
					// #endif
					// #ifdef APP-PLUS
					client = "APP";
					// #endif

					let submit = {
						client,
						way: 'VIRTUAL', //立即购买
						remark: [],
						parentOrderSn: "",
						goodsId: item.id //商品ID
					};
					/**
					 * 创建订单
					 */
					API_Trade.createTrade(submit).then((res) => {
						if (res.data.success) {
							uni.showToast({
								title: "创建订单成功!",
								duration: 2000,
								icon: "none",
							});
							this.pay(res.data.result.sn, callBack)
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000,
								icon: "none",
							});
						}
					}).catch(err => {

					})
				}, this, 3000);
			},
			/**
			 * 微信小程序中直接支付
			 */
			async pay(sn, callBack) {
				WXPaySdk({
					sn: sn,
					price: 1,
				}).then(res => {
					console.log("成功", res);
					if (res.success && callBack) {
						callBack(true)
					} else {
						callBack(false)
					}

				}).catch(err => {
					if (callBack) {
						callBack(false)
					}
				})

			},

			// 二级页面
			handleRwardModalClose() {
				this.isGetRewards = false
			},
			handleToGetVipClick(type) {
				this.actTabbar = {
					type: "shop",
					name: "商店",
					isFullCon: false
				}
				if (type == 'vip') {
					this.actPrivilege = this.privilegeTabList[0]
					this.actPrivilegeIndex = 0
				} else if (type == 'svip') {
					this.actPrivilege = this.privilegeTabList[1]
					this.actPrivilegeIndex = 1
				}
			},
			handleGetTaskRewards(item, index, type) {
				let gameId = this.globalGameCtx.gameId
				let taskId = item.id

				if (item.taskStatus == 1) {
					this.btnClickIndex = index + String(type)
					setTimeout(() => {
						this.btnClickIndex = -1
					}, 100)
					taskGetRewards({
						gameId,
						taskId
					}).then(res => {
						// console.log("获取任务奖励", res);
						let result = res.data.result
						// 弹起恭喜获得
						this.handleOpenRwardModal(result)
						// 刷新数据
						this.handleGetTaskCenterList()
					})
				}

			},
			handleGetTaskCenterList() {
				let gameId = this.globalGameCtx.gameId
				getTaskCenterList({
					gameId
				}).then(res => {
					let result = res.data.result
					this.signStatus = result.signStatus
					this.svipStatus = result.svipStatus
					this.vipStatus = result.vipStatus


					this.daysPointTotal = result.daysPointTotal
					this.signCount = result.signCount
					this.todayPoint = result.point
					this.task7DaysList = result.task7DaysList
					this.baseTaskList = [{
							name: "每日任务",
							type: "daily",
							list: [...result.taskDailyList]
						},
						{
							name: "会员特权",
							type: "vip",
							list: [...result.taskVipList]
						},
						{
							name: "总裁特权",
							type: "svip",
							list: [...result.taskSvipList]
						},
					]

					console.log('拿到的任务数据是', this.baseTaskList);


				})
			},
			handleOpenRwardModal(data) {
				let rewards = [...data].map((item, index) => {
					return {
						...item,
						RarityLevel: !item.rare ? 0 : item.rare
					}
				})

				let eventData = {
					eventType: "event-default",
					diceName: "",
					coverUrl: "",
					rewardsList: rewards,
					notNeedAutoClose: true
				}
				this.isGetRewards = true
				this.$refs.getRewardsModal.open('reward', eventData)
			},
			handleTodaySingIn() {
				if (!this.signStatus) {
					this.btnClickIndex = -2
					setTimeout(() => {
						this.btnClickIndex = -1
					}, 100)
					let gameId = this.globalGameCtx.gameId
					sevenDaysSign({
						gameId
					}).then(res => {
						let result = res.data.result
						// 弹起恭喜获得
						this.handleOpenRwardModal(result)
						// 刷新数据
						this.handleGetTaskCenterList()

					})
				}



			},
			// 乐舞相关事件
			handleGoLuckDraw() {
				this.isGoClick = true
				setTimeout(() => {
					this.actTabbar = {
						type: 'luck-draw',
						name: "心动抽卡",
						isFullCon: true
					}
					this.isGoClick = false
				}, 300)
			},
			handleGirlsTypeItemClick(item, index) {
				this.actGirlsType = item
			},
			// 商店相关事件
			handleVipBuy(data) {
				// this.actBuyData = data
				// this.handleBuyGoodsClick('confirm')
				console.log("商店购买点击", data)
				this.createTradeFun({
					id: data.goodsId
				}, (res) => {
					if (res) {
						this.handleFourFunctionsItemClick('my-vip-ceo')
					}
				})
			},
			handleBuyGoodsClick(type) {
				this.btnClickIndex = type
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)
				if (type == 'cancel') {
					console.log("取消购买");
					this.showBuyModal = false
					this.buyNum = 1
				} else if (type == 'confirm') {
					// console.log("确定购买");
					if (this.buyGoodsTotalConsume > this.totalPoint) {
						uni.showToast({
							title: "余额不足",
							icon: 'none'
						})
						// 弹起充值弹框
						this.$refs.mRecharge.open()

					} else {
						// 走购买逻辑
						buyGoods({
							gameId: this.gameId,
							cardId: this.actBuyData.id,
							num: this.buyNum
						}).then(res => {
							// console.log('购买成功返回', res);
							uni.showToast({
								title: "购买成功",
								icon: 'none'
							})
							this.showBuyModal = false
							this.buyNum = 1
						})

					}

				}
			},
			handleBuyGoodsNumControl(type) {
				this.btnClickIndex = type
				setTimeout(() => {
					this.btnClickIndex = -1
				}, 100)
				if (type == 'sub') {
					if (this.buyNum == 1) {
						return
					}
					this.buyNum--
				} else if (type == 'add') {
					if (this.buyNum == 999) {
						return
					}
					this.buyNum++
				}
			},
			handleBuyGoods(item, index) {
				console.log("点击购买", item);
				if (item.type == 'prop' || item.type == 'giftBox') {
					this.actBuyData = item
					this.showBuyModal = true
				} else {
					this.createTradeFun({
						id: item.goodsId
					})
				}

				// 点击购买按钮，弹起购买弹窗
				// console.log("购买按钮点击");

			},
			handleGetPointList() {
				let gameId = this.globalGameCtx.gameId
				getPointList({
					gameId
				}).then(res => {
					let result = res.data.result

					this.rechargeList = [...result].map((item, index) => {
						item.RarityLevel = item.rare
						item.type = 'recharge'
						return item
					})

				})
			},
			handleGetGiftBoxList() {
				let gameId = this.globalGameCtx.gameId
				getGiftBoxList({
					gameId
				}).then(res => {
					// giftBoxList
					let result = res.data.result
					this.giftBoxList = [...result].map((item, index) => {
						item.RarityLevel = item.rare
						item.type = 'giftBox'
						return item
					})
				})
			},
			handleGetPropsList() {
				// propsList
				let gameId = this.globalGameCtx.gameId
				getPropsList({
					gameId
				}).then(res => {
					let result = res.data.result
					this.propsList = [...result].map((item, index) => {
						item.RarityLevel = item.rare
						item.type = 'prop'
						return item
					})
					this.testGiftBoxList = this.propsList.filter((item, index) => {
						return index <= 3
					})
					// console.log("获取到测试数据", this.testGiftBoxList);
				})
			},
			handleGetVipList() {
				let gameId = this.globalGameCtx.gameId
				getVipList({
					gameId
				}).then(res => {
					let {
						vipList,
						vipRightsList,
						svipList,
						svipRightsList
					} = res.data.result

					let vip = {
						name: "心动会员",
						type: "vip-comment",
						cardBg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c0c9bd9008494538bd8b774fcfbd4717.png",
						cardList: vipList,
						privilegeList: vipRightsList
					}
					let svip = {
						name: "总裁特权",
						type: "vip-ceo",
						cardBg: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/46d3e7b452a04c8e9eaea87e8c8509a8.png",
						cardList: svipList,
						privilegeList: svipRightsList
					}
					this.privilegeTabList = [vip, svip]
					this.actPrivilege = vip
				})
			},
			handlePropTypeItemClick(item, index) {
				this.actPropType = item
			},
			handlePrivilegeTabClick(item, index) {
				this.actPrivilege = item
				this.actPrivilegeIndex = index
			},
			handleShopTabItemClick(item, index) {
				this.actShopTab = item
			},
			// 返回相关事件
			handleHideBack() {
				this.isHideBack = true
			},
			handleShowBack() {
				this.isHideBack = false
			},
			// 全屏组件事件
			handleBackClick() {
				if (this.preTabbar) {
					this.actTabbar = this.preTabbar
				} else {
					this.actTabbar = this.tabbarList[0]
				}

				// #ifdef MP-TOUTIAO
				this.isGoClick = true
				setTimeout(() => {
					this.isGoClick = false
				}, 300)
				// #endif



			},
			// 首页点击事件
			handleHomeBannerClick() {
				console.log("banner点击");
			},
			handleTwoFunctionItemClick(item, index) {
				if (item.key == 'quick-party') {
					// this.handleQuickParty()
					this.actTabbar = {
						type: 'shop',
						name: "商店",
						isFullCon: false
					}
					this.actShopTab = {
						name: "权益",
						type: "shop-privilege",
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c4562486236a401aadf7fa6c7c4e77e6.png",
						actIcon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c31865f0526f4c229f792a5c27761a65.png"
					}

					this.handleToGetVipClick('svip')
				} else if (item.key == 'reward-center') {

					this.handleGetTaskCenterList()
					this.actTabbar = {
						type: 'rewardCenter',
						name: "奖励中心",
						isFullCon: true
					}
				}
			},
			handleQuickParty() {
				let gameId = this.globalGameCtx.gameId
				quickParty({
					gameId
				}).then(res => {
					let {
						storyId,
						cardId
					} = res.data.result
					if (storyId && cardId) {
						this.handleCardItemClick({
							storyId,
							id: cardId
						})
					}


				})
			},
			handleGetCardList() {
				let gameId = this.globalGameCtx.gameId
				getMyCardList({
					gameId
				}).then(res => {
					let result = res.data.result
					this.cardList = [...result].map((item, index) => {
						let obj = {
							...item
						}
						obj.image = item.coverUrl
						obj.start = item.star
						obj.RarityLevel = item.cardRare
						obj.name = item.cardName
						return obj

					})
				})
			},
			handleGetFirstPageRecommendList() {
				let gameId = this.globalGameCtx.gameId
				getFirstPageRecommendList(gameId).then(res => {
					let result = [...res.data.result]
					this.girlRecommendList = result.map((item, index) => {
						item.intro = String(item.intro).includes("|") ? String(item.intro).split("|") : [
							String(item.intro)
						];
						return item
					})

				})
			},
			handleCardItemClick(item, index) {
				if (item.storyId) {
					let gameId = this.globalGameCtx.gameId
					let cardId = item.id
					this.getRoomCardDetail({
						gameId,
						cardId
					}).then(res => {
						this.$emit("getGameResult", item.storyId)
					})
				}
			},
			handleToGirlRoom(item, index) {
				if (item.storyId) {
					let gameId = this.globalGameCtx.gameId
					let cardId = item.id
					this.getRoomCardDetail({
						gameId,
						cardId
					}).then(res => {
						this.$emit("getGameResult", item.storyId)
					})
				}
			},
			// 消息点击事件
			handleGetChartList() {
				let gameId = this.globalGameCtx.gameId
				getChatList({
					gameId
				}).then(res => {
					this.chatList = res.data.result


				})
			},
			handleMessageListItemClick(item, index, type) {
				this.actAgentId = item.roleAgentId
				// 请求相关数据
				this.actTabbar = {
					type: "chatPage",
					name: "聊天组件",
					isFullCon: true
				}
				// if (type == 'avatar') {
				// 	return
				// 	this.actTabbar = {
				// 		type: "mianPage",
				// 		name: "主页组件",
				// 		isFullCon: true
				// 	}
				// } else if (type == 'text') {
				// 	this.actAgentId = item.roleAgentId
				// 	// 请求相关数据
				// 	this.actTabbar = {
				// 		type: "chatPage",
				// 		name: "聊天组件",
				// 		isFullCon: true
				// 	}

				// }
			},
			// 我的点击事件
			handleMineOtherFunctionsItemClick(item, index) {
				let key = item.type
				switch (key) {
					case 'my-recharge':
						this.$refs.mRecharge.open()
						break;
					case 'my-share':

						break;
					case 'my-vip-comment':
						this.handleToGetVipClick('vip')
						break;
					case 'my-bag':
						this.actTabbar = {
							type: 'my-bag',
							name: "我的背包",
							isFullCon: true
						}
						break;
					default:
						this.actTabbar = {
							type: 'emptyPage',
							name: "",
							isFullCon: true
						}
						break;
				}


			},
			handleGetMyInfo() {
				let gameId = this.globalGameCtx.gameId
				getMyInfo({
					gameId
				}).then(res => {
					let result = res.data.result
					this.myInfo = result
					this.playerLevelInfo = result.playerLevelInfo
					this.totalPoint = result.point

					console.log("获取到的用户信息是", result);
				})
			},
			handleFourFunctionsItemClick(item, index) {
				// console.log("我的点击", item);
				let type = item.type
				switch (type) {
					case 'my-reward-center':
						this.actTabbar = {
							type: 'rewardCenter',
							name: "奖励中心",
							isFullCon: true
						}
						break;
					case 'my-dance':
						this.actTabbar = {
							type: 'dance',
							name: "乐舞",
							isFullCon: false
						}
						break;
					case 'my-pack':
						this.$refs.mRecharge.open()
						break;
					case 'my-vip-ceo':
						this.$emit("getGameResult", "S008KYF")
						break;
					default:
						break;
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.m-home-page {
		position: relative;
		z-index: 999999999999999;
		background-color: #fff;
		box-sizing: border-box;


		.home-tabbar-content {
			position: relative;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}

		.recharge-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 999;
			pointer-events: none;
		}

		.buy-modal {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 998;
			background-color: rgba(0, 0, 0, .5);

			.buy-good-content {
				position: relative;
				width: calc(100% - 120rpx);
				min-height: 500rpx;
				background-color: #fff;
				border-radius: 30rpx;
				overflow: hidden;

				.buy-total-consume {
					width: 100%;
					margin-top: 20rpx;
					padding: 0rpx 20rpx;

					.total-consume-box {
						font-size: 24rpx;
						line-height: 30rpx;
						color: #98989a;

						.total-consume-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 6rpx;
						}
					}

				}

				.good-info {
					width: 100%;

					.good-info-default {
						width: 100%;

						.good-info-default-name {
							width: 100%;
							font-size: 30rpx;
							line-height: 30rpx;
							color: #343530;
							font-weight: 700;
							margin-top: 20rpx;
						}

						.good-info-default-intro {
							width: 100%;
							font-size: 28rpx;
							line-height: 28rpx;
							color: #343530;
							// font-weight: 700;
							margin-top: 30rpx;
						}


					}

					.good-info-giftBox {
						width: 100%;
						padding: 0rpx 60rpx;
						// margin-bottom: 30rpx;
						margin-top: 30rpx;

						.good-info-photo {
							margin-top: 0rpx;
							width: 150rpx;
							height: 150rpx;
						}

						.good-info-giftBox-intro {
							flex: 1;
							margin-left: 20rpx;

							.good-info-giftBox-name {
								width: 100%;
								font-size: 30rpx;
								line-height: 30rpx;
								color: #343530;
								font-weight: 700;
								margin-bottom: 20rpx;
							}

							.good-info-giftBox-intro-content {
								display: inline-block;
								font-size: 24rpx;
								line-height: 24rpx;
								background-color: rgba(245, 246, 250, 1);
								padding: 10rpx 20rpx;
								border-radius: 10rpx;
							}
						}
					}




					.good-info-photo {
						position: relative;
						width: 200rpx;
						height: 200rpx;
						// background-color: rgba(245, 246, 250, 1);
						background-color: rgba(255, 255, 255, 0.3);
						margin-top: 30rpx;
						// border-radius: 20rpx;
						overflow: hidden;

						.good-buy-num {
							position: absolute;
							right: 10rpx;
							bottom: 10rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #343530;
							font-weight: 700;
							z-index: 9;
						}

					}
				}

				.good-split-line {
					width: 100%;
					padding: 0rpx 40rpx;
					margin-top: 40rpx;

					.good-line-point {
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #ccc;
					}

					.good-line {
						flex: 1;
						height: 5rpx;
						// background-color: #ccc;
						background: repeating-linear-gradient(to right,
								#ccc,
								#ccc 5rpx,
								transparent 5rpx,
								transparent 8rpx);
						margin: 0rpx 10rpx;
					}
				}

				.good-info-gift-inner {
					width: 100%;
					margin-top: 30rpx;

					.good-info-gift-inner-text {
						width: 100%;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #343530;
					}

					.good-info-gift-inner-list {
						width: 100%;
						margin-top: 40rpx;

						.inner-list-item {
							position: relative;
							width: 100rpx;
							height: 100rpx;
							// background-color: rgba(245, 246, 250, 1);
							background-color: rgba(255, 255, 255, 0.3);
							margin-right: 20rpx;

							&:last-child {
								margin-right: 0rpx;
							}

							.inner-list-item-num {
								position: absolute;
								right: 5rpx;
								bottom: 5rpx;
								font-size: 20rpx;
								line-height: 20rpx;
								z-index: 9;
								color: #343530;
								font-weight: 700;
							}
						}
					}
				}

				.good-control-inner {
					width: 100%;
					margin-top: 30rpx;

					.control-button {
						width: 120rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background-color: rgba(104, 97, 239, .1);

						.control-button-icon {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.godd-buy-num {
						width: 200rpx;
						height: 60rpx;
						border-radius: 30rpx;
						font-size: 30rpx;
						line-height: 30rpx;
						color: #343530;
						background-color: rgba(245, 246, 250, 1);
						margin: 0rpx 20rpx;
					}
				}

				.good-buy-btns {
					width: 100%;
					margin-top: 50rpx;
					margin-bottom: 30rpx;

					.good-buy-btn {
						width: 200rpx;
						height: 80rpx;
						border-radius: 50rpx;
						border: 2rpx solid transparent;
						color: #343530;
						font-size: 30rpx;
						line-height: 30rpx;

					}

					.good-buy-cancel {
						margin-right: 30rpx;
						border-color: #98989a;

					}

					.good-buy-confirm {
						background-color: #9366eb;
						color: #fff;
					}
				}
			}
		}

		.full-components-content {
			position: relative;
			width: 100%;
			height: 100%;

			.back-box {
				z-index: 999;
			}

			.getReward-modal {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 9999999;
			}

			.full-box {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 1;

				.empty-box {
					width: 100%;
					height: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.second-page-box {
					position: relative;
					width: 100%;
					height: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;

				}


				.second-page-content {
					flex: 1;
					width: 100%;
					overflow: hidden;


					.reward-center-box {
						width: 100%;
						padding: 0rpx 30rpx;

						.reward-today {
							width: 100%;
							height: 160rpx;
							background-color: #fff;
							border-radius: 20rpx;
							margin-top: 20rpx;
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .1);
							padding: 0rpx 30rpx;

							.reward-today-content {
								width: 100%;
								// height: 50rpx;
								margin-bottom: 10rpx;
								color: #343530;

								.reward-content-icon {
									width: 40rpx;
									height: 40rpx;
									margin-right: 6rpx;
								}

								.reward-content-text {
									font-size: 26rpx;
									line-height: 26rpx;
									margin-right: 20rpx;
								}

								.reward-content-num {
									font-size: 32rpx;
									line-height: 32rpx;
									font-weight: 700;
								}


							}

							.reward-today-tips {
								width: 100%;
								font-size: 22rpx;
								line-height: 22rpx;
								color: #98989a;
							}
						}


						.reward-sign-in {
							width: 750rpx;
							padding: 0rpx 30rpx;
							margin-top: 30rpx;


							.reward-sing-in-list {
								width: 100%;
								margin-top: 20rpx;

								.reward-sing-in-item {
									width: 90rpx;
									margin-right: 10rpx;

									&:last-child {
										margin-right: 0rpx;
									}

									.sing-in-reward {
										width: 100%;
										height: 120rpx;
										background-color: #fff;
										border-radius: 10rpx;
										font-size: 22rpx;
										line-height: 22rpx;
										color: #343530;
										font-weight: 700;
										text-align: center;
										box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .1);
										border: 2rpx solid transparent;

										.sing-in-reward-icon {
											width: 30rpx;
											height: 30rpx;
											margin-top: 10rpx;
										}
									}

									.sing-in-text {
										width: 100%;
										font-size: 22rpx;
										line-height: 22rpx;
										color: #98989a;
										margin-top: 20rpx;
									}
								}

								.reward-singed-in-item {
									.sing-in-reward {
										border-color: #9366eb;
									}

									.sing-in-text {
										color: #343530;
									}
								}
							}

							.reward-sing-in-button {
								position: relative;
								width: 100%;
								height: 80rpx;
								margin-top: 20rpx;
								border-radius: 20rpx;
								background-image: linear-gradient(to right, #f3f1c6, #efcf80);
								color: #b27439;
								font-weight: 700;
								box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
								font-size: 30rpx;
								line-height: 30rpx;

								.sing-in-button-masker {
									position: absolute;
									left: 0rpx;
									top: 0rpx;
									width: 100%;
									height: 100%;
									background-color: rgba(0, 0, 0, .2);
									border-radius: 20rpx;
								}
							}
						}

						.reward-day-task {
							width: 100%;
							// min-height: 200rpx;


							.reward-day-task-content {
								width: 100%;
								background-color: #fff;
								border-radius: 20rpx;
								margin-top: 30rpx;
								padding: 20rpx;
							}

							.day-task-list {
								width: 100%;
								margin-top: 20rpx;

								.day-task-item {
									width: 100%;
									height: 100rpx;
									margin-bottom: 10rpx;

									.task-icon {
										width: 80rpx;
										height: 80rpx;
										margin-right: 20rpx;
									}

									.task-content {
										flex: 1;
										height: 100%;

										.task-top {
											width: 100%;
											font-size: 24rpx;
											line-height: 24rpx;
											color: #343530;
											margin-bottom: 10rpx;

											.task-title {
												margin-right: 10rpx;
												font-weight: 700;
											}

											.task-reward {
												.task-reward-num {
													margin-right: 10rpx;
													font-weight: 700;
												}

												.task-reward-icon {
													width: 30rpx;
													height: 30rpx;

												}
											}
										}

										.task-task-intro {
											width: 100%;
											font-size: 20rpx;
											line-height: 20rpx;
											color: #98989a;
										}
									}

									.task-button {
										position: relative;
										width: 120rpx;
										height: 50rpx;


										.task-button-content {
											width: 100%;
											height: 100%;
											border-radius: 10rpx;
											background-image: linear-gradient(to right, #f3f1c6, #efcf80);
											color: #b27439;
											font-weight: 700;
											font-size: 22rpx;
											line-height: 22rpx;
											box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);

											&::after {
												content: "";
												position: absolute;
												right: -6rpx;
												top: -6rpx;
												width: 12rpx;
												height: 12rpx;
												border-radius: 50%;
												background-color: #e25850;
												opacity: 0;
												z-index: 9;
												border: 1rpx solid rgba(2555, 255, 255, .6);
											}
										}

										.task-button-get-reward {
											&::after {
												opacity: 1;
											}
										}

									}



									.cancleBtn {
										background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%) !important;
										color: #646369 !important;
									}

								}
							}
						}

						.more-task-tip {
							font-size: 22rpx;
							line-height: 22rpx;
							color: #98989a;
							margin: 20rpx 0rpx;
						}


						.reward-tips {
							width: 100%;

							.reward-tips-title {
								font-size: 30rpx;
								line-height: 30rpx;
								color: #343530;
								font-weight: 700;
							}

							.reward-log-tip {
								font-size: 24rpx;
								line-height: 24rpx;
								color: #98989a;
							}

							.to-get-vip {
								height: 30rpx;
								font-size: 24rpx;
								line-height: 30rpx;
								color: #98989a;

								.to-get-vip-icon {
									width: 30rpx;
									height: 30rpx;
									vertical-align: middle;
									margin-left: 10rpx;
								}
							}
						}
					}


					.my-bag-box {
						width: 100%;
					}
				}
			}
		}

		.home-transition-bg {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			z-index: -1;
			background-image: linear-gradient(to bottom, rgba(104, 97, 239, .8)0%, rgba(216, 150, 253, .6)60%, rgba(104, 97, 239, 0)100%);
		}


		.home-center-content {
			flex: 1;
			width: 100%;
			overflow: hidden;

			.home-box {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.home-banner {
					position: relative;
					width: 100%;
					height: 220rpx;
					box-sizing: border-box;
					padding: 0rpx 30rpx;

					.banner-content {
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
						overflow: hidden;
					}
				}

				.home-function {
					width: 100%;
					height: 110rpx;
					box-sizing: border-box;
					padding: 0rpx 30rpx;
					margin-top: 20rpx;

					.home-function-item {
						flex: 1;
						height: 100%;
						border-radius: 20rpx;
						margin-right: 20rpx;
						overflow: hidden;
						background-color: #fff;

						&:last-child {
							margin-right: 0rpx;
						}
					}
				}

				.home-tips {
					width: 100%;
					padding: 0rpx 30rpx;
					font-stretch: 30rpx;
					line-height: 30rpx;
					color: #343530;
					font-weight: 700;
					margin-top: 20rpx;
				}

				.home-list-box {
					width: 100%;
					margin-top: 20rpx;

					.home-list-content {
						width: 750rpx;
						box-sizing: border-box;
						padding: 0rpx 30rpx;
						flex-wrap: wrap;

						.home-list-item {
							position: relative;
							width: 340rpx;
							height: 480rpx;
							background-color: #fff;
							border-radius: 20rpx;
							margin-bottom: 10rpx;
							margin-right: 10rpx;
							overflow: hidden;

							&:nth-child(2n) {
								margin-right: 0rpx;
							}

							.home-item-bottom-info {
								position: absolute;
								left: 0rpx;
								bottom: 0rpx;
								width: 100%;
								height: 100rpx;
								background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .8)100%);

								.home-girl-name {
									width: 100%;
									color: #fff;
									font-size: 30rpx;
									line-height: 30rpx;
									margin-bottom: 20rpx;
									text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
								}

								.home-girl-label {
									width: 100%;
									font-size: 24rpx;
									line-height: 24rpx;
									margin-bottom: 20rpx;
									color: rgba(255, 255, 255, .8);
									text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

									.girl-label-item {
										margin-right: 10rpx;

										&:last-child {
											margin-right: 0rpx;
										}
									}
								}
							}

						}

					}

				}


			}

			.message-box {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.message-top-message {
					width: 100%;
					padding: 0rpx 30rpx;
					margin-top: 20rpx;

					.message-top-item {
						flex: 1;
						height: 110rpx;
						margin-right: 20rpx;
						border-radius: 30rpx;
						box-sizing: border-box;
						padding: 0rpx 20rpx;

						&:last-child {
							margin-right: 0rpx;
						}

						.message-top-text {
							flex: 1;
							height: 100%;
							margin-right: 10rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #fff;
							text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

							.message-top-title {
								width: 100%;
							}

							.message-top-title-tip {
								width: 100%;
								font-size: 22rpx;
								line-height: 22rpx;
								margin-top: 10rpx;
							}
						}

						.message-top-icon {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.message-system {
						background-image: linear-gradient(to bottom right, #6c80fa, #7dc8fe);
					}

					.message-email {
						background-image: linear-gradient(to bottom right, #7268fa, #c6a6ff);
					}
				}

				.message-tip {
					width: 100%;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #343530;
					box-sizing: border-box;
					padding: 0rpx 30rpx;
					margin-top: 50rpx;
					margin-bottom: 10rpx;
				}

				.message-list-box {
					flex: 1;
					width: 100%;
					overflow: hidden;

					.message-list {
						width: 100%;
						box-sizing: border-box;
						padding: 20rpx 30rpx;

						.message-list-item {
							width: 100%;
							height: 150rpx;
							border-radius: 30rpx;
							background-color: #fff;
							margin-bottom: 20rpx;
							box-sizing: border-box;
							padding: 0rpx 20rpx;
							// box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

							.message-avatar {
								width: 100rpx;
								height: 100rpx;
								border-radius: 20rpx;
								margin-right: 20rpx;
								overflow: hidden;
							}

							.message-text {
								flex: 1;
								height: 100%;
								overflow: hidden;

								.message-name-time {
									width: 100%;

									.message-name {
										font-size: 26rpx;
										line-height: 26rpx;
										color: #343530;
									}

									.message-createTime {
										font-size: 20rpx;
										line-height: 20rpx;
										color: #ccc;
									}
								}

								.message-text-content {
									width: 100%;
									font-size: 24rpx;
									line-height: 24rpx;
									color: rgba(52, 53, 48, .6);
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									margin-top: 15rpx;
								}
							}
						}
					}

				}
			}

			.dance-box {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;

				.go-luck-draw {
					position: absolute;
					right: -2rpx;
					bottom: 200rpx;
					height: 60rpx;
					background-color: #fff;
					// box-shadow: 0rpx 0rpx 4rpx rgba(147, 102, 235, 1);
					border: 2rpx solid #9366eb;
					border-radius: 30rpx 0rpx 0rpx 30rpx;
					z-index: 99999;
					box-sizing: content-box;
					padding-left: 20rpx;
					padding-right: 20rpx;
					transition: transform 0.3s;

					.go-luck-draw-icon {
						width: 40rpx;
						height: 40rpx;
						// margin-right: 8rpx;

					}

					.go-luck-draw-text {
						flex: 1;
						height: 100%;
						font-size: 22rpx;
						line-height: 22rpx;
						color: #343530;
						font-weight: 700;
						// text-shadow: 0rpx 0rpx 2rpx #9366eb;
					}


				}



				.dance-girls-list {
					width: 100%;

					.dance-girls-content {
						width: 750rpx;
						flex-wrap: wrap;
						padding: 0rpx 55rpx;
						padding-top: 10rpx;

						.dance-girls-item {
							position: relative;
							width: 200rpx;
							height: 300rpx;
							border-radius: 10rpx;
							margin-bottom: 20rpx;
							overflow: hidden;
							margin-right: 20rpx;
							background-color: #fff;


							&:nth-child(3n) {
								margin-right: 0rpx;
							}

						}
					}
				}
			}

			.shop-box {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.shop-top-tab {
					width: 100%;
					box-sizing: border-box;
					padding: 0rpx 30rpx;
					margin-top: 30rpx;

					.shop-tab-item {
						width: 160rpx;
						height: 60rpx;
						border-radius: 40rpx;
						background-color: #fff;


						.shop-tab-icon {
							position: relative;
							width: 30rpx;
							height: 30rpx;
							margin-right: 4rpx;

							.shop-tab-icon-content {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
							}
						}

						.shop-tab-name {
							font-size: 22rpx;
							line-height: 22rpx;
							color: #64676c;
							// text-shadow: 0rpx 0rpx 2rpx #64676c;
							letter-spacing: 2rpx;
							font-weight: 700;
						}
					}

					.act-shop-tab-item {
						.shop-tab-name {
							color: #9366eb;
						}
					}
				}

				.shop-content {
					flex: 1;
					width: 100%;
					overflow: hidden;
					margin-top: 10rpx;






					.shop-privilege-box {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						padding-top: 20rpx;

						.shop-privilege-card {
							width: 750rpx;
							height: 280rpx;
							padding: 0rpx 30rpx;

							.privilege-card-content {
								position: relative;
								width: 100%;
								height: 100%;
								border-radius: 30rpx;
								overflow: hidden;

								.shop-privilege-user-info {
									position: absolute;
									left: 0rpx;
									bottom: 50rpx;
									width: 100%;
									padding: 0rpx 48rpx;

									.user-avatar {
										width: 60rpx;
										height: 60rpx;
										border-radius: 50%;
										background-color: #fff;
										border: 2rpx solid #fff;
										// box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
										margin-right: 20rpx;
										overflow: hidden;
									}

									.privilege-user-time {
										font-size: 24rpx;
										line-height: 24rpx;
									}

								}
							}



						}

						.shop-privilege-type-content {
							position: relative;
							width: 100%;
							// margin-top: 30rpx;
							margin-top: -20rpx;
							padding-bottom: 20rpx;
							border-radius: 30rpx;
							background-color: #fff;
							z-index: 9;

						}

						.shop-privilege-tabs {
							position: relative;
							width: 100%;

							.privilege-tab-line {
								position: absolute;
								transform: translateX(-50%);
								bottom: 0rpx;
								width: 40rpx;
								height: 4rpx;
								transition: left 0.3s;
							}


							.privilege-tab-item {
								flex: 1;
								height: 60rpx;
								font-size: 28rpx;
								line-height: 28rpx;
								color: #343530;
								font-weight: 700;

								&:last-child {
									margin-right: 0rpx;
								}
							}


						}

						.shop-privilege-list {
							width: 750rpx;
							padding: 0rpx 25rpx;
							margin-top: 40rpx;

							.privilege-card-item {
								position: relative;
								width: 220rpx;
								height: 280rpx;
								background-color: #fff;
								border-radius: 20rpx;
								margin-right: 20rpx;
								border: 2rpx solid transparent;
								padding: 0rpx 20rpx;

								&:last-child {
									margin-right: 0rpx;
								}

								.privilege-card-name {
									font-size: 24rpx;
									line-height: 24rpx;
									font-weight: 700;
									color: #343530;
									margin-top: 20rpx;
								}

								.privilege-card-oldPrice {
									font-size: 20rpx;
									line-height: 20rpx;
									color: #ccc;
									margin-top: 20rpx;
									text-decoration: line-through;
								}

								.privilege-card-price {
									font-size: 46rpx;
									line-height: 46rpx;
									font-weight: 700;
									margin-top: 30rpx;
								}

								.privilege-buy-btn {
									position: absolute;
									left: 50%;
									bottom: 20rpx;
									margin-bottom: 0rpx;
									transform: translateX(-50%);
								}

							}
						}


						.shop-privilege-intro {
							flex: 1;
							width: 100%;
							margin-top: 30rpx;
							background-color: #fff;

							border-radius: 30rpx 30rpx 0rpx 0rpx;
							overflow: hidden;

							.privilege-intro-title {
								width: 100%;
								font-size: 30rpx;
								line-height: 30rpx;
								color: #343530;
								font-weight: 700;
								margin-top: 30rpx;
								margin-bottom: 10rpx;
							}

							.privilege-intro-list {
								flex: 1;
								width: 100%;
								overflow: hidden;

								.privilege-intro-inner {
									width: 100%;
									padding: 0rpx 30rpx;
									padding-bottom: 0rpx;

									.privilege-intro-item {
										width: 100%;
										height: 130rpx;
										border-radius: 20rpx;
										margin-bottom: 20rpx;
										padding: 0rpx 20rpx;

										&:last-child {
											margin-bottom: 0rpx;
										}

										.privilege-intro-icon {
											width: 60rpx;
											height: 60rpx;
											margin-right: 20rpx;
										}

										.privilege-intro-content {
											flex: 1;
											height: 100%;

											.privilege-intro-content-title {
												font-size: 24rpx;
												line-height: 24rpx;
												color: #343530;
												margin-bottom: 15rpx;
											}

											.privilege-intro-text {
												font-size: 22rpx;
												line-height: 22rpx;
												color: rgba(52, 53, 48, .6);
											}
										}
									}

								}
							}

						}


					}



				}
			}

			.mine-box {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				overflow: hidden;

				.mine-box-content {
					width: 100%;

					.mine-info-box {
						width: 100%;
						padding: 0rpx 30rpx;
						margin-top: 30rpx;

						.mine-avatar {
							width: 120rpx;
							height: 120rpx;
							margin-right: 20rpx;
							border-radius: 50%;
							// border: 2rpx solid #fff;
							overflow: hidden;
							background-color: #fff;

						}

						.mine-info {
							flex: 1;
							height: 120rpx;

							.mine-nick-name {
								width: 100%;
								font-size: 30rpx;
								line-height: 30rpx;
								color: #343530;
								font-weight: 700;
								margin-bottom: 10rpx;
							}

							.mine-base-info {
								width: 100%;
								height: 30rpx;
								margin-bottom: 10rpx;

								.mine-id {
									margin-right: 20rpx;

									.mine-id-icon {
										width: 40rpx;
										height: 20rpx;
										font-size: 16rpx;
										line-height: 16rpx;
										border-radius: 15rpx;
										font-weight: 700;
										background-color: #98989a;
										color: #fff;
										text-align: center;
										margin-right: 10rpx;
									}

									.mine-id-text {
										font-size: 20rpx;
										line-height: 20rpx;
										color: #98989a;
										// text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .2);
									}
								}

								.mine-level {
									font-size: 24rpx;
									line-height: 24rpx;
									color: #343530;

									.mine-level-icon {
										font-size: 18rpx;
										line-height: 24rpx;
									}

								}

								.mine-level-split-icon {
									width: 2rpx;
									height: 20rpx;
									background-color: #98989a;
									margin: 0rpx 10rpx;
									opacity: 0.5;
								}

								.mine-level-name {
									font-size: 16rpx;
									line-height: 24rpx;
									padding: 0rpx 10rpx;
									border-radius: 2rpx;
									background-color: #9366eb;
									color: #fff;
								}
							}

							.mine-level-progress {
								width: 100%;

								.level-progress-content {
									position: relative;
									width: 400rpx;
									height: 16rpx;
									background-color: #fff;
									border-radius: 10rpx;
									margin-right: 10rpx;
									overflow: hidden;
									padding: 2rpx;

									.level-progress-inner {
										width: 30%;
										height: 100%;
										border-radius: 10rpx;
										background-color: #9366eb;
										box-shadow: 0rpx 0rpx 2rpx #fff;
										transition: width 0.3s linear;
									}
								}

							}

							.level-progress-percent {
								font-size: 16rpx;
								line-height: 16rpx;
								color: #98989a;
							}
						}
					}

					.mine-four-function {
						width: 750rpx;
						flex-wrap: wrap;
						margin-top: 30rpx;
						padding: 0rpx 30rpx;

						.four-function-item {
							position: relative;
							width: 335rpx;
							height: 110rpx;
							border-radius: 20rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							overflow: hidden;
							background-color: #fff;
							box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

							&:nth-child(2n) {
								margin-right: 0rpx;
							}

							.my-pack-thing {
								position: absolute;
								left: 0rpx;
								bottom: 20rpx;
								width: 100%;
								height: 30rpx;
								padding: 0rpx 25rpx;

								.my-pack-thing-item {
									font-size: 20rpx;
									line-height: 20rpx;
									margin-right: 30rpx;
									color: #fff;
									text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

									&:last-child {
										margin-right: 0rpx;
									}

									.my-pack-thing-icon {
										width: 30rpx;
										height: 30rpx;
										margin-right: 4rpx;
									}
								}
							}
						}

					}


					.mine-other-controls {
						width: 100%;
						padding: 0rpx 30rpx;

						.other-big-item {
							width: 100%;
							background-color: #fff;
							border-radius: 30rpx;
							padding: 0rpx 30rpx;
							margin-bottom: 20rpx;
						}

						.mine-other-item {
							position: relative;
							width: 100%;
							height: 110rpx;



							.mine-other-item-icon {
								width: 60rpx;
								height: 60rpx;
							}

							.mine-other-text {
								position: relative;
								flex: 1;
								height: 100%;
								font-size: 24rpx;
								line-height: 24rpx;
								color: #343530;
								font-weight: 700;
								padding-left: 20rpx;

								&::after {
									content: '';
									position: absolute;
									left: 0rpx;
									bottom: 0rpx;
									width: 100%;
									height: 2rpx;
									background-color: rgba(0, 0, 0, .1);
									opacity: 0.3;
								}

							}

							.mine-other-next {
								width: 30rpx;
								height: 30rpx;
								margin-left: 30rpx;
							}

						}
					}

				}
			}


		}

		.home-bottom-tabbar {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);

			.home-tabbar-item {
				flex: 1;
				height: 100%;

				.tabbar-icon {
					position: relative;
					width: 50rpx;
					height: 50rpx;

					.tabbar-icon-content {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 100%;
					}
				}

				.tabbar-name {
					font-size: 20rpx;
					line-height: 20rpx;
					color: #64676c;
					text-shadow: 0rpx 0rpx 2rpx #64676c;
					margin-top: 10rpx;
					letter-spacing: 2rpx;

				}

			}

			.act-tabbar {
				.tabbar-name {
					// color: #a258f5;
					// color: #d896fd;
					color: #9366eb;
					text-shadow: 0rpx 0rpx 2rpx #9366eb;
				}
			}
		}
	}


	.mini-type-tabs {
		width: 100%;
		height: 60rpx;
		margin-bottom: 10rpx;

		.mini-type-list {
			position: relative;
			height: 60rpx;
			box-sizing: content-box;
			// padding: 0rpx 30rpx;

			.mini-type-item {
				position: relative;
				width: 120rpx;
				height: 100%;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #343530;
				flex-shrink: 0;


				&::after {
					content: "";
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0rpx;
					width: 20rpx;
					height: 4rpx;
					background-color: #9366eb;
					opacity: 0;
				}


			}



			.act-mini-type-item {
				color: #9366eb;

				&::after {
					opacity: 1;
				}
			}
		}
	}


	.shop-props {
		width: 100%;
		color: #343530;

		.shop-props-inner {
			width: 750rpx;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 20rpx 25rpx;
			padding-top: 10rpx;

			.shop-props-item {
				width: 220rpx;
				height: 330rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .1);

				&:nth-child(3n) {
					margin-right: 0rpx;
				}

				.shop-goods-icon {
					position: relative;
					width: 100rpx;
					height: 100rpx;
					// background-color: rgba(204, 204, 204, 0.2);
					background-color: rgba(255, 255, 255, 0.3);
					margin-bottom: 20rpx;
					overflow: hidden;
					// box-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .1);

					.shop-goods-count {
						position: absolute;
						right: 4rpx;
						bottom: 4rpx;
						font-size: 20rpx;
						line-height: 20rpx;
						text-shadow: 0rpx 0rpx 2rpx #343530;
						z-index: 1;
					}
				}

				.shop-goods-name {
					width: 100%;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					line-height: 24rpx;
				}

				.shop-goods-intro {
					width: 100%;
					font-size: 22rpx;
					line-height: 22rpx;
					color: #ccc;
					margin-bottom: 30rpx;
				}


			}

		}
	}


	.shop-goods-btn {
		width: 180rpx;
		height: 50rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background-image: linear-gradient(to right, #f3f1c6, #efcf80);
		color: #b27439;
		font-weight: 700;
		box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
		font-size: 24rpx;
		line-height: 24rpx;

		.shop-goods-btn-icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 4rpx;
		}
	}

	.not-scoll-full-content {
		flex: 1;
		overflow: hidden;
	}

	.hide-content {
		opacity: 0;
	}

	.home-top-nav {
		width: 100%;
		height: 200rpx;
		margin-bottom: 10rpx;

		.home-nav-text-box {
			width: 100%;
			font-size: 30rpx;
			line-height: 30rpx;
			font-weight: 700;
			letter-spacing: 2rpx;
			color: #343530;
			padding: 0rpx 30rpx;
		}
	}

	.btnIsClick {
		animation: buttonClickScale 0.1s linear;
	}

	.share-button {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		z-index: 9;
		opacity: 0;
	}

	.act-go {
		transform: translateX(100%);
	}

	.toutiao-back-btn {
		position: absolute;
		right: -2rpx;
		bottom: 200rpx;
		height: 50rpx;
		background-color: #fff;
		border: 2rpx solid #9366eb;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		box-sizing: content-box;
		padding: 0rpx 40rpx;
		transition: transform 0.3s;

		font-size: 24rpx;
		line-height: 24rpx;
		color: #343530;
		font-weight: 700;

		z-index: 99999;
	}
</style>